{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}
<form data-abide novalidate id="{{formPanelId}}Wizard" class="custom creation">
  <dl id="vnet_create_tabs" class="tabs sunstone-info-tabs text-center" data-tabs>
    <dd class="tabs-title is-active">
      <a href="#vnetCreateGeneralTab"> <i class="fa fa-globe"></i>
        <br>{{tr "General"}}</a>
    </dd>
    <dd class="tabs-title">
      <a href="#vnetCreateBridgeTab"> <i class="fa fa-cog"></i>
        <br>{{tr "Conf"}}</a>
    </dd>
    <dd class="tabs-title">
      <a href="#vnetCreateARTab">
        <i class="fa fa-align-justify"></i>
        <br>{{tr "Addresses"}}</a>
    </dd>
    <dd class="tabs-title">
      <a href="#vnetCreateSecurityTab">
        <i class="fa fa-shield"></i>
        <br>{{tr "Security"}}</a>
    </dd>
    <dd class="tabs-title">
      <a href="#vnetCreateQoSTab">
        <i class="fa fa-wrench"></i>
        <br>{{tr "QoS"}}</a>
    </dd>
    <dd class="tabs-title">
      <a href="#vnetCreateContextTab">
        <i class="fa fa-folder"></i>
        <br>{{tr "Context"}}</a>
    </dd>
  </dl>
  <div id="vnet_create_tabs_content" class="tabs-content" data-tabs-content="vnet_create_tabs">
    <div class="tabs-panel is-active" id="vnetCreateGeneralTab">
      <div class="row">
        <div class="medium-6 columns">
          <label for="name" >
            {{tr "Name"}}
          </label>
          <input type="text" wizard_field="NAME" required name="name" id="name"/>
        </div>
      </div>
      <div class="row">
        <div class="medium-6 columns">
          <label for="DESCRIPTION" >
            {{tr "Description"}}
          </label>
          <textarea type="text" wizard_field="DESCRIPTION" id="DESCRIPTION" name="DESCRIPTION"/>
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="vnetCreateBridgeTab">
      <div class="row">
        <div class="medium-6 columns">
          <label for="bridge">
            {{tr "Bridge"}}
            <span class="tip">
              {{tr "Name of the physical bridge in the nodes to attach VM NICs"}}
            </span>
          </label>
          <input type="text" wizard_field="BRIDGE" name="bridge" id="bridge" />
        </div>
      </div>
      <div class="row">
        <div class="medium-6 columns">
          <label for="network_mode">
            {{tr "Network mode"}}
          </label>
          <select wizard_field="VN_MAD" name="network_mode" id="network_mode">
            <option value="dummy">{{tr "Bridged"}}</option>
            <option value="fw">{{tr "Bridged & Security Groups"}}</option>
            <option value="ebtables">{{tr "Bridged & ebtables VLAN"}}</option>
            <option value="802.1Q">{{tr "802.1Q"}}</option>
            <option value="vxlan">{{tr "VXLAN"}}</option>
            <option value="ovswitch">{{tr "Open vSwitch"}}</option>
            <option value="custom">{{tr "Custom"}}</option>
          </select>
        </div>
        <div class="large-3 medium-6 columns mode_param custom">
          <label for="vn_mad">
            {{tr "Network Driver (VN_MAD)"}}
          </label>
          <input type="text" wizard_field="VN_MAD" name="vn_mad" id="vn_mad" />
        </div>
        <div class="large-12 columns">
          <div class="network_mode_description" value="dummy">
            {{tr "Bridged, virtual machine traffic is directly bridged through an existing Linux bridge in the nodes. No traffic filtering is made."}}
          </div>
          <div class="network_mode_description" value="fw">
            {{tr "Bridged & Security Groups, bridged network with Security Group rules."}}
          </div>
          <div class="network_mode_description" value="ebtables">
            {{tr "Bridged & ebtables VLAN, restrict network access through ebtables rules. Security Group rules are applied."}}
          </div>
          <div class="network_mode_description" value="802.1Q">
            {{tr "802.1Q, restrict network access through VLAN tagging. Security Group rules are applied."}}
          </div>
          <div class="network_mode_description" value="vxlan">
            {{tr "VXLAN, creates a L2 network overlay, each VLAN has associated a multicast address in the 239.0.0.0/8 range. Security Group rules are applied."}}
          </div>
          <div class="network_mode_description" value="ovswitch">
            {{tr "Open vSwitch, restrict network access with Open vSwitch Virtual Switch. Security Groups are not applied."}}
          </div>
          <div class="network_mode_description" value="custom">
            {{tr "Custom, use a custom virtual network driver."}}
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="large-6 columns mode_param ebtables 8021Q vxlan fw ovswitch custom">
          <label for="mac_spoofing">
            <input type="checkbox" wizard_field="FILTER_MAC_SPOOFING" value="YES" name="mac_spoofing" id="mac_spoofing" />
            {{tr "MAC spoofing filter"}}
          </label>
        </div>
      </div>
      <div class="row">
        <div class="large-6 columns mode_param ebtables 8021Q vxlan fw ovswitch custom">
          <label for="ip_spoofing">
            <input type="checkbox" wizard_field="FILTER_IP_SPOOFING" value="YES" name="ip_spoofing" id="ip_spoofing" />
            {{tr "IP spoofing filter"}}
            </span>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="medium-3 columns left mode_param 8021Q vxlan ovswitch custom">
          <label>
            {{tr "VLAN ID"}}
            <select wizard_field="AUTOMATIC_VLAN_ID">
              <option value="YES">{{tr "Automatic VLAN ID"}}</option>
              <option value="NO">{{tr "No VLAN network"}}</option>
              <option value="">{{tr "Manual VLAN ID"}}</option>
            </select>
            <input type="number" wizard_field="VLAN_ID"/>
          </label>
        </div>
        <div class="medium-3 columns left mode_param 8021Q vxlan custom">
          <label for="phydev">
            {{tr "Physical device"}}
            <span class="tip">
              {{tr "Node NIC to send/receive virtual network traffic"}}
            </span>
          </label>
          <input type="text" wizard_field="PHYDEV" name="phydev" id="phydev" />
        </div>
        <div class="medium-3 columns left mode_param 8021Q vxlan custom">
          <label for="mtu">
            {{tr "MTU of the interface"}}
          </label>
          <input type="text" wizard_field="MTU" name="mtu" id="mtu" />
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="vnetCreateARTab">
      <div class="row collapse" id="vnetCreateARTabCreate">
        <div class="medium-2 columns">
          <ul class="tabs vertical" id="vnet_wizard_ar_tabs" data-tabs></ul>
          <div class="text-center">
            <button type="button" class="button small tabs-add" id="vnet_wizard_ar_btn">
              <i class="fa fa-lg fa-plus-circle"></i>
            </button>
          </div>
        </div>
        <div class="medium-10 columns">
          <div class="tabs-content vertical" id="vnet_wizard_ar_tabs_content" data-tabs-content="vnet_wizard_ar_tabs"></div>
        </div>
      </div>
      <div class="row" id="vnetCreateARTabUpdate">
        <div class="large-12 columns">
          <p>
            {{tr "Address Ranges need to be managed in the individual Virtual Network panel"}}
          </p>
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="vnetCreateSecurityTab">
      {{{securityGroupsTableHTML}}}
      <div class="row" id="default_sg_warning">
        <div class="large-12 columns">
          <span class="radius warning label">
            <i class="fa fa-warning"/> {{tr "The default Security Group 0 is automatically added to new Virtual Networks"}}
          </span>
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="vnetCreateQoSTab">
      <fieldset>
        <legend>{{tr "Inbound traffic"}}</legend>
        <div class="row">
          <div class="medium-4 columns">
            <label>
              {{tr "Average bandwidth (KBytes/s)"}}
              <input type="number" wizard_field="INBOUND_AVG_BW"/>
            </label>
          </div>
          <div class="medium-4 columns">
            <label>
              {{tr "Peak bandwidth (KBytes/s)"}}
              <input type="number" wizard_field="INBOUND_PEAK_BW"/>
            </label>
          </div>
          <div class="medium-4 columns">
            <label>
              {{tr "Peak burst (KBytes)"}}
              <input type="number" wizard_field="INBOUND_PEAK_KB"/>
            </label>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend>{{tr "Outbound traffic"}}</legend>
        <div class="row">
          <div class="medium-4 columns">
            <label>
              {{tr "Average bandwidth (KBytes/s)"}}
              <input type="number" wizard_field="OUTBOUND_AVG_BW"/>
            </label>
          </div>
          <div class="medium-4 columns">
            <label>
              {{tr "Peak bandwidth (KBytes/s)"}}
              <input type="number" wizard_field="OUTBOUND_PEAK_BW"/>
            </label>
          </div>
          <div class="medium-4 columns">
            <label>
              {{tr "Peak burst (KBytes)"}}
              <input type="number" wizard_field="OUTBOUND_PEAK_KB"/>
            </label>
          </div>
        </div>
      </fieldset>
      <div class="row">
        <div class="large-12 columns">
          <span class="radius secondary label">
            <i class="fa fa-info-circle"/> {{tr "These values apply to each VM interface individually, they are not global values for the Virtual Network"}}
          </span>
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="vnetCreateContextTab">
      <div class="row">
        <div class="medium-6 columns">
          <label for="net_address">
            {{tr "Network address"}}
          </label>
          <input type="text" wizard_field="NETWORK_ADDRESS" name="net_address" id="net_address" />
        </div>
        <div class="medium-6 columns">
          <label for="net_mask">
            {{tr "Network mask"}}
          </label>
          <input type="text" wizard_field="NETWORK_MASK" name="net_mask" id="net_mask" />
        </div>
      </div>
      <div class="row">
        <div class="medium-6 columns">
          <label for="net_gateway">
            {{tr "Gateway"}}
          </label>
          <input type="text" wizard_field="GATEWAY" name="net_gateway" id="net_gateway" />
        </div>
        <div class="medium-6 columns">
          <label for="net_gateway6">
            {{tr "IPv6 Gateway"}}
          </label>
          <input type="text" wizard_field="GATEWAY6" name="net_gateway6" id="net_gateway6" />
        </div>
      </div>
      <div class="row">
        <div class="medium-6 columns">
          <label for="net_dns">
            {{tr "DNS"}}
          </label>
          <input type="text" wizard_field="DNS" name="net_dns" id="net_dns" />
        </div>
        <div class="medium-6 columns">
          <label for="net_mtu">
            {{tr "MTU of the Guest interfaces"}}
          </label>
          <input type="text" wizard_field="GUEST_MTU" name="net_mtu" id="net_mtu" />
        </div>
      </div>
      <fieldset>
        <legend>{{tr "Custom attributes"}}</legend>
        {{{customTagsHTML}}}
      </fieldset>
    </div>
  </div>
</form>
